import React from 'react';
import { Link } from 'react-router-dom';
import { MapPin, Instagram, Twitter, Linkedin } from 'lucide-react';
export function OurTeam() {
  const teamMembers = [{
    id: 'michael-chen',
    name: 'Michael Chen',
    role: 'Founder & Lead Gear Tester',
    image: 'https://images.unsplash.com/photo-1607990281513-2c110a25bd8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80',
    location: 'Seattle, WA',
    bio: 'Former mountain guide with 15+ years of experience testing gear in extreme environments. Michael founded OpenGo Hub after a near-disaster on Denali when his equipment failed.',
    expertise: ['Alpine Climbing', 'Mountaineering', 'Winter Camping'],
    social: {
      instagram: 'michaelchengear',
      twitter: 'michaelchenhub',
      linkedin: 'michaelchen-opengo'
    }
  }, {
    id: 'sarah-johnson',
    name: 'Sarah Johnson',
    role: 'Technical Editor & Trail Runner',
    image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80',
    location: 'Boulder, CO',
    bio: 'Ultra-runner and gear obsessive who has completed races on all seven continents. Sarah brings scientific rigor to our testing protocols and specializes in footwear analysis.',
    expertise: ['Trail Running', 'Footwear', 'Ultralight Gear'],
    social: {
      instagram: 'sarahjruns',
      twitter: 'sarahjgear',
      linkedin: 'sarahjohnson-editor'
    }
  }, {
    id: 'alex-rodriguez',
    name: 'Alex Rodriguez',
    role: 'Climbing Equipment Specialist',
    image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80',
    location: 'Yosemite, CA',
    bio: 'Professional climber with first ascents on three continents. Alex has been breaking and testing climbing gear for over a decade and leads our climbing equipment review program.',
    expertise: ['Rock Climbing', 'Trad Gear', 'Rope Systems'],
    social: {
      instagram: 'alexrclimbs',
      twitter: 'alexrodriguezclimb',
      linkedin: 'alexrodriguez-climb'
    }
  }, {
    id: 'emma-patel',
    name: 'Emma Patel',
    role: 'Water Sports Director',
    image: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80',
    location: 'Portland, OR',
    bio: 'Former Olympic kayaker and wilderness guide with expertise in all things water-related. Emma has paddled on five continents and tests everything from PFDs to packrafts.',
    expertise: ['Kayaking', 'Paddleboarding', 'Water Filtration'],
    social: {
      instagram: 'emmapatelpaddles',
      twitter: 'emmaonwater',
      linkedin: 'emmapatel-water'
    }
  }, {
    id: 'james-thompson',
    name: 'James Thompson',
    role: 'Bikepacking & Cycling Expert',
    image: 'https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80',
    location: 'Moab, UT',
    bio: 'Mechanical engineer and avid cyclist who has bikepacked across the Continental Divide twice. James brings technical expertise and hands-on experience to our cycling gear reviews.',
    expertise: ['Bikepacking', 'Mountain Biking', 'Gear Repair'],
    social: {
      instagram: 'jamesrides',
      twitter: 'jamesthompsonbikes',
      linkedin: 'jamesthompson-cycling'
    }
  }, {
    id: 'leila-wong',
    name: 'Leila Wong',
    role: 'Winter Sports & Photography',
    image: 'https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80',
    location: 'Jackson, WY',
    bio: 'Professional photographer and backcountry skier who specializes in winter gear and alpine photography equipment. Leila has tested gear in some of the harshest winter environments.',
    expertise: ['Backcountry Skiing', 'Photography Gear', 'Winter Camping'],
    social: {
      instagram: 'leilawongphoto',
      twitter: 'leilawongoutdoor',
      linkedin: 'leilawong-photo'
    }
  }, {
    id: 'marcus-berg',
    name: 'Marcus Berg',
    role: 'Survival & Bushcraft Specialist',
    image: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80',
    location: 'Anchorage, AK',
    bio: "Former military survival instructor with extensive experience in remote wilderness areas. Marcus tests cutting tools, fire starters, and emergency gear in Alaska's challenging conditions.",
    expertise: ['Survival Tools', 'Bushcraft', 'Emergency Preparedness'],
    social: {
      instagram: 'marcusbergsurvival',
      twitter: 'marcusbushcraft',
      linkedin: 'marcusberg-survival'
    }
  }, {
    id: 'aisha-thomas',
    name: 'Aisha Thomas',
    role: 'Apparel & Layering Systems',
    image: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80',
    location: 'Denver, CO',
    bio: 'Textile engineer and thru-hiker who has completed the Triple Crown (AT, PCT, CDT). Aisha specializes in analyzing fabrics, insulation, and layering systems for all environments.',
    expertise: ['Technical Fabrics', 'Layering Systems', 'Thru-Hiking Gear'],
    social: {
      instagram: 'aishahikes',
      twitter: 'aishathomas_gear',
      linkedin: 'aishathomas-textiles'
    }
  }];
  return <div className="w-full bg-earth-dark">
      {/* Hero Section */}
      <section className="relative py-24 bg-carbon-black">
        <div className="absolute inset-0 z-0">
          <img src="https://images.unsplash.com/photo-1527525443983-6e60c75fff46?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80" alt="Team on mountain" className="w-full h-full object-cover opacity-30" />
        </div>
        <div className="container mx-auto px-4 relative z-10">
          <div className="max-w-3xl">
            <h1 className="font-display text-4xl md:text-6xl mb-6">OUR TEAM</h1>
            <p className="text-xl text-gray-300">
              Meet the adventurers, gear obsessives, and outdoor professionals
              who make OpenGo Hub the most trusted source for gear reviews and
              outdoor expertise.
            </p>
          </div>
        </div>
      </section>
      {/* Team Introduction */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center mb-16">
            <h2 className="font-display text-3xl md:text-4xl mb-6">
              THE GEAR TESTING CREW
            </h2>
            <p className="text-xl text-gray-300">
              Our team consists of professional athletes, industry experts, and
              passionate outdoor enthusiasts who put every piece of gear through
              rigorous real-world testing before it earns our recommendation.
            </p>
          </div>
          {/* Team Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
            {teamMembers.map(member => <div key={member.id} className="bg-carbon-black rounded-lg overflow-hidden">
                <div className="h-64 overflow-hidden">
                  <img src={member.image} alt={member.name} className="w-full h-full object-cover" />
                </div>
                <div className="p-6">
                  <h3 className="font-display text-2xl mb-1">{member.name}</h3>
                  <p className="text-outdoor-orange mb-2">{member.role}</p>
                  <div className="flex items-center text-sm text-gray-400 mb-4">
                    <MapPin size={14} className="mr-1" />
                    <span>{member.location}</span>
                  </div>
                  <p className="text-gray-300 mb-4">{member.bio}</p>
                  <div className="mb-4">
                    <h4 className="text-sm font-bold mb-2">EXPERTISE:</h4>
                    <div className="flex flex-wrap gap-2">
                      {member.expertise.map((skill, index) => <span key={index} className="bg-earth-dark text-sm px-2 py-1 rounded">
                          {skill}
                        </span>)}
                    </div>
                  </div>
                  <div className="flex space-x-3">
                    <a href={`https://instagram.com/${member.social.instagram}`} target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-outdoor-orange transition-colors">
                      <Instagram size={18} />
                    </a>
                    <a href={`https://twitter.com/${member.social.twitter}`} target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-outdoor-orange transition-colors">
                      <Twitter size={18} />
                    </a>
                    <a href={`https://linkedin.com/in/${member.social.linkedin}`} target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-outdoor-orange transition-colors">
                      <Linkedin size={18} />
                    </a>
                  </div>
                </div>
              </div>)}
          </div>
        </div>
      </section>
      {/* Join the Team */}
      <section className="py-16 bg-carbon-black">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="font-display text-3xl md:text-4xl mb-6">
              JOIN OUR CREW
            </h2>
            <p className="text-xl text-gray-300 mb-8">
              We're always looking for passionate outdoor enthusiasts with
              specialized expertise to join our testing team. If you live for
              adventure and have a critical eye for gear performance, we want to
              hear from you.
            </p>
            <div className="flex flex-wrap justify-center gap-4">
              <Link to="/careers" className="bg-outdoor-orange hover:bg-climbing-red text-white font-display px-6 py-3 rounded transition-colors">
                VIEW OPEN POSITIONS
              </Link>
              <Link to="/contact" className="border-2 border-sand-light hover:border-white text-white font-display px-6 py-3 rounded transition-colors">
                CONTACT US
              </Link>
            </div>
          </div>
        </div>
      </section>
      {/* Global Testing Network */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <h2 className="font-display text-3xl md:text-4xl text-center mb-12">
            OUR GLOBAL TESTING NETWORK
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
            <div>
              <img src="https://images.unsplash.com/photo-1569974498991-d3c12a504f95?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="World map with testing locations" className="rounded-lg w-full h-auto" />
            </div>
            <div>
              <p className="text-gray-300 mb-6">
                Our core team is supported by a global network of field testers
                who put gear through its paces in diverse environments around
                the world. From the Arctic Circle to the Australian Outback, we
                test gear where it's meant to be used.
              </p>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <h3 className="font-display text-xl mb-3">NORTH AMERICA</h3>
                  <ul className="text-gray-300 space-y-1">
                    <li>Pacific Northwest</li>
                    <li>Rocky Mountains</li>
                    <li>Desert Southwest</li>
                    <li>Alaska Range</li>
                    <li>Appalachian Mountains</li>
                  </ul>
                </div>
                <div>
                  <h3 className="font-display text-xl mb-3">INTERNATIONAL</h3>
                  <ul className="text-gray-300 space-y-1">
                    <li>European Alps</li>
                    <li>Patagonia</li>
                    <li>Himalayas</li>
                    <li>New Zealand</li>
                    <li>Scandinavian Arctic</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>;
}